<template>
  <div class="register-background-container">
    <img src="@/assets/svg/register/background.svg" alt="Background" class="register-wave" />
  </div>
  <div class="register-page">
    <div class="register-logo-container">
      <h2>AIToEdu</h2>
      <img src="@/assets/logo.png" alt="Logo" class="register-logo" />
    </div>
    <div class="register-outer-container">
      <div class="register-image-container">
        <img src="@/assets/svg/register/pic1.svg" alt="Illustration" />
      </div>
      <div class="register-form-container">
        <h2>注册</h2>
        <el-form style="padding: 0 30px;">
          <el-form-item style="height: 40px">
            <el-input placeholder="电子邮箱" prefix-icon="message" type="email" v-model="registerForm.email" required></el-input>
          </el-form-item>
          <el-form-item style="height: 40px">
            <el-input placeholder="验证码" prefix-icon="lock" v-model="registerForm.cert" required>
              <template #suffix>
                <el-button class="verification-btn" type="primary" style="margin: 0 -11px"
                           @click="getVerificationCode">获取验证码</el-button>
              </template>
            </el-input>
          </el-form-item>
          <el-form-item>
            <el-input type="password" placeholder="设置密码" prefix-icon="lock" v-model="registerForm.password" required></el-input>
          </el-form-item>
          <el-form-item style="height: 40px">
            <el-input type="password" placeholder="确认密码" prefix-icon="lock" v-model="registerForm.rePassword" required></el-input>
          </el-form-item>
          <el-form-item style="height: 40px">
            <el-input placeholder="姓名" prefix-icon="user" v-model="registerForm.username" required></el-input>
          </el-form-item>
          <el-form-item style="height: 40px">
            <el-select placeholder="选择您的身份" v-model="registerForm.role" required>
            <el-option
            v-for="item in roleOptions"
            :key="item.role"
            :label="item.name"
            :value="item.role"
            />
          </el-select>
          </el-form-item>
          <el-form-item style="height: 40px">
            <el-button type="text" class="register-btn" @click="register">注册</el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>
  </div>
</template>

<script setup name="Register" lang="ts">

import router from '@/router'
import axios from 'axios';
import { ElMessage } from 'element-plus';
import { reactive, ref } from 'vue';

interface IRegisterForm {
  email: string,
  cert: string,
  password: string,
  rePassword: string,
  username: string,
  role: number,
  school: string
}

const registerForm: IRegisterForm = reactive({
  email: '',
  cert: '',
  password: '',
  rePassword: '',
  username: '',
  role: '',
  school: ''
})

const roleOptions = reactive([
  {
    role: 1,
    name: '教师'
  },
  {
    role: 2,
    name: '学生'
  }
])

const reg = /^([a-zA-Z]|[0-9])(\w|\-)+@[a-zA-Z0-9]+\.([a-zA-Z]{2,4})$/
const resRole = ref('')

const checkEmail = () => {
  if(registerForm.email === '') {
    ElMessage({
      message: '邮箱不能为空！',
      type: 'error'
    })
    return false
  } else if(!reg.test(registerForm.email)) {
    ElMessage({
      message: '邮箱格式错误！',
      type: 'warning'
    })
    return false
  }
  return true
}

const getVerificationCode = async () => {
  console.log(registerForm.email)
  if(checkEmail()) {
    await axios.get(`logic/user/certify?email=${registerForm.email}`)
      .then(res => {
        console.log(res.data)
      })
  }
}

const register = async () => {
  console.log('注册')
  if(registerForm.password === '' || registerForm.password === null) {
    ElMessage({
      message: '请输入密码',
      type: 'warning'
    })
    return
  } else if(registerForm.password !== registerForm.rePassword) {
    ElMessage({
      message: '两次密码不相同',
      type: 'warning'
    })
    return 
  }
  if((registerForm.role !== 1 && registerForm.role !== 2) || (registerForm.username === '')) {
    ElMessage({
      message: '注册信息不完全',
      type: 'warning'
    })
    return 
  }
  await axios.post('logic/user/register', registerForm)
    .then(res => {
      if(res.data.code === 200) {
        ElMessage({
          message: '注册成功',
          type: 'success'
        })
        router.push('/login')
      } else {
        ElMessage({
          message: res.data.msg,
          type: 'error'
        })
      }
    })
}

</script>

<style scoped>

.register-wave {
  position: absolute;
  bottom: 0;
  width: 100%;
}

.register-background-container {
  position: absolute;
  top: 0;
  left: -960px;
  width: 100%;
  height: 100%;
  background: white;
  z-index: -1;
  backdrop-filter: blur(20px);
}

.register-page {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
  width: 100%;
}

.register-logo-container {
  display: flex;
  position: absolute;
  left: 20px;
  top: -15px;
  align-items: center;
  gap: 10px;
  z-index: 1;
}

.register-logo-container h2 {
  font-size: 55px;
  color: #dfefff !important;
}

.register-logo {
  width: 70px;
}

.register-outer-container {
  display: flex;
  width: 1200px;
  height: 720px;
  margin-top: 30px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  border-radius: 10px;
  backdrop-filter: blur(20px);
}

.register-image-container {
  display: flex;
  width: 70%;
  background-color: #f6fbff;
  justify-content: center;
  align-items: center;
  border-radius: 10px 0 0 10px;
}

.register-form-container {
  background-color: #ffffff4c;
  padding: 40px 30px;
  color: #fff;
  width: 50%;
  border-radius: 0 10px 10px 0;
}

.register-form-container h2 {
  font-size: 40px;
  font-weight: lighter;
  margin-top: -10px;
  margin-bottom: 40px;
  color: #1A1A1A;
}

.register-btn {
  padding: 20px;
  font-size: 16px;
  cursor: pointer;
  margin-top: 30px;
  width: 424px;
  color: #007BFF;
  border: 1px solid #007BFF;
  background-color: white;
  border-radius: 24px;
}

.register-image-container img {
  max-width: 100%;
  max-height: 100%;
  border-radius: 10px;
  /* 圆角 */
}
</style>
